<template>
<div>
    <el-upload class="upload-demo" drag :action="upfileurl" multiple :headers="headers" :on-success="success" :on-error="error">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-row id="" style="padding: 10px 0;">
        <el-col :span="18">
            <el-input v-model="names" placeholder="文件名字"></el-input>
        </el-col>
        <el-col :span="6" style="padding-left: 15px;">
            <el-button type="primary" @click="getuserlist(1)">搜索</el-button>
            <el-button type="primary" @click="clears">重置</el-button>
        </el-col>
    </el-row>
    <!-- <el-button type="primary" v-for="i in $store.state.user.menulist[this.$route.path]" :key="i.id" @click="btn(i.code)">{{i.name}}</el-button> -->
    <!--{{$store.state.user.menulist[this.$route.path]}}-->
    <div v-if="tableData" style="padding:20px 0">
        <el-table ref="singleTable" :data="tableData" style="width: 100%" height="500" @cell-click="celltable" :highlight-current-row="true">
            <el-table-column label="id" prop="id">
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime">
            </el-table-column>
            <el-table-column label="文件预览">
                <template slot-scope="scope">
                    <!-- 静态地址+文件名字 -->
                    <img :src="publicimg+scope.row.originalFileName" style="height:100px">
                    <!-- {{scope.row.realFileName}} -->
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="downloadFile(scope.row)">
                        下载
                    </el-button>
                    <!-- {{scope.row.realFileName}} -->
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-if="total">
        <el-pagination background layout="prev, pager, next" :page-size="5" :total="total" @current-change="pagetype">
        </el-pagination>
    </div>
</div>
</template>

<script>
import {
    http,
    filelist,
    downloadfile,
    file,
    publicimg
} from '../../api/api.js'
export default {
    data() {
        return {
            tableData: '', //用户列表数据
            total: '', //总数量
            names: '', //搜索的名字
            buttontype: { //功能对话框状态
                // mgrAdd: false, //添加用户
                // mgrEdit: false, //修改用户
                // mgrDelete: false, //删除用户
                // mgrSetRole: false, //分配角色
            },
            tablerow: '', //当前选中的文件
            page: 1, //当前页码
            upfileurl: http + file, //文件上传的地址
            headers: { //文件上传的请求头
                'constnet-type': 'multipart/form-data',
                'Authorization': localStorage.token
            },
            publicimg, //图片静态地址
        }
    },
    mounted() {
        this.getuserlist(1)
    },
    components: {},
    methods: {
        success(data) {
            if (data.msg == '成功') {
                this.getuserlist(this.page)
            } else {
                this.$message.error(data.message);
            }
        },
        error(err) {
            this.$message.error(err.message);
        },
        downloadFile(row) {
            //下载按钮
            location.href = http + downloadfile + '?idFile=' + row.id + '&fileName=' + row.originalFileName
        },
        //点击选中的文章
        celltable(row) {
            this.tablerow = row
        },
        //对话框关闭回调
        showbtn(type) {
            // this.buttontype[type] = false
            // this.getuserlist(this.page)
            // this.tablerow = ''
        },
        //统一管理按钮点击事件
        btn(a) {
            // if (a == 'mgrAdd') {
            //     this.buttontype[a] = true
            // } else {
            //     if (this.tablerow == '') {
            //         this.$message.error('请选择要操作的用户');
            //     } else {
            //         if (a == 'mgrFreeze') {
            //             if (this.tablerow.statusName == '冻结') {
            //                 this.$message.error('当前用户已经是冻结状态哟');
            //             } else {
            //                 this.buttontype[a] = true
            //             }
            //         } else if (a == 'mgrUnfreeze') {
            //             if (this.tablerow.statusName == '启用') {
            //                 this.$message.error('当前用户已经是启用状态哟');
            //             } else {
            //                 this.buttontype[a] = true
            //             }
            //         } else {
            //             this.buttontype[a] = true
            //         }
            //     }
            // }
        },
        //重置
        clears() {
            this.names = ''
            this.getuserlist(1)
        },
        //页码发生改变时触发
        pagetype(page) {
            this.page = page
            this.getuserlist(page)
        },
        //获取文件列表
        getuserlist(page) {
            //开启动画
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            this.$http.get(http + filelist, {
                params: {
                    page,
                    limit: 5,
                    originalFileName: this.names
                }
            }).then((data) => {
                if (data.data.msg == '成功') {
                    this.tableData = data.data.data.records
                    this.total = data.data.data.total
                    console.log(this.tableData)
                } else {
                    this.$message.error(data.data.message);
                }
                //结束动画
                setTimeout(() => {
                    loading.close();
                }, 1000);
            }, (err) => {
                this.$message.error(err.data.message);
            })
        }
    }
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
